<template>
	<view class="pay-success">
        <view class="pay-notice">
            <view class="success-icon"><uv-icon size="40" name="checkbox-mark" color="#fff"></uv-icon></view>
            <view class="title">支付成功</view>
            <view class="desc">进入我的 - 电影订单查看取票码</view>
        </view>
        <view class="bt-panel">
            <uv-button shape="circle" class="bg-line-color" type="primary" @click="goMine">查看订单</uv-button>
        </view>
        <view class="bt-panel">
            <uv-button shape="circle" :hairline="true" :plain="true" @click="goIndex">返回首页</uv-button>
        </view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"

const goMine = (index : any) => {
    uni.reLaunch({
        url:`/pages/movie/orderList`
    })
}
const goIndex = () => {
    uni.reLaunch({
        url:`/pages/index/index`
    })
}

onLoad((options : any) => {

})
</script>

<style lang="scss">
.pay-success{
    background-color: rgba(255,255,255,.92);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    position: fixed;
    width: 100%;
    height: 88vh;
    bottom: 0;
    left: 0;
    .success-icon{
        width: 172upx;
        height: 172upx;
        border-radius: 172upx;
        background-color: #1daf73;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
    .pay-notice{
        padding:220upx 0 72upx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .title{
        font-size:38upx;
        font-weight: 600;
        padding: 52upx 0 12upx;
    }
    .desc{
        font-size:$font-sm;
        color:$font-color-light;
    }
    .bt-panel{
        padding:16px;
        width:92%
    }
}
.power-button{
    height: 62upx;
    line-height: 62upx;
    width: 220upx;
    text-align: center;
    padding: 3upx;
    display: flex;
    margin: 0 42upx;
    border-radius: 72upx;
    overflow: hidden;
    .power-button-inner{
      width:100%;
      background:#fff;
      color:#333;
      border-radius: 72upx;
    }
    &.power-button-fill{
      .power-button-inner{
        background:transparent;
        color:#fff;
      }
    }
}
.power-button{
  height: 82upx;
  line-height: 82upx;
  width: 72%;
  margin: 72upx auto;
  color:#000;
  padding:6upx;
  font-size: 32upx;
  font-weight: 600;
  .power-button-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    image{
      margin-right: 32upx;
      width:40upx;
      height:40upx;
    }
  }
}
</style>
